<template>
    <view class="uni-select u-flex">
        <view v-for="(item,index) in selectData" :key="index"
            :style="{width: index==0?'40%':'60%', background:bgColor}"
            :class="['item','u-flex','u-row-between','u-p-l-20','u-p-r-20',item.show?'active-item':'']"
            @tap.stop="click(index)">
            <text :class="['u-font-28',item.show?'uni-inverse-color':'uni-dec-color']">
                {{item.label}}
            </text>
            <u-icon 
                :name="item.show?'arrow-up-fill':'arrow-down-fill'" 
                :color="item.show?'#fff':'#5D6672'" size="12">
            </u-icon>

            <!-- 弹出部分---下拉选择 -->
            <scroll-view scroll-y v-if="item.show&&item.type=='deviceType'" class="list">
                <view v-for="(tem,ind) in item.list" :key="ind"
                    :class="['tem','u-p-l-20','u-flex','u-p-r-20',tem.value==item.value?'active-item':'']"
                    @tap.stop="select(index,tem)">
                    <text :class="['u-font-28',tem.value==item.value?'uni-inverse-color':'uni-dec-color']">
                        {{tem.label}}
                    </text>
                </view>
            </scroll-view>

            <!-- 弹出部分---时间选择 -->
            <view v-if="item.show&&item.type=='date'" class="uni-select-date date">
                <u--form labelPosition="top" :model="item.form" ref="form">
                    <u-form-item label="开始时间" prop="startDate" ref="item1" labelWidth="auto" @click="showDate('startDate')">
                        <u--input disabled v-model="item.form.startDate" border="surround" 
                            suffixIcon="arrow-down-fill" suffixIconStyle="color:#999;fontSize:28rpx" >
                        </u--input>
                    </u-form-item>
                    <u-form-item label="结束时间" prop="endDate" ref="item2" labelWidth="auto" @click="showDate('endDate')">
                        <u--input disabled v-model="item.form.endDate" border="surround" 
                            suffixIcon="arrow-down-fill" suffixIconStyle="color:#999;fontSize:28rpx">
                        </u--input>
                    </u-form-item>
                </u--form>
                <view class="u-flex u-row-right">
                    <view class="dateConfirm u-flex u-row-center" @tap.stop="confirmDate(index)">确定</view>
                </view>
                <!-- 时间选择器 -->
                <u-datetime-picker :show="date.show" v-model="date.value" mode="date" 
                    :closeOnClickOverlay="true"
                    @cancel="date.show=false" @close="date.show=false" @confirm="selectDate">
                </u-datetime-picker>
            </view>
        </view>
    </view>
</template>

<script>
import tools from '@/tools/tools.js'
export default {
    name: 'uni-select',
    props:{
        bgColor:{
            type: String,
            default () {
                return '#F6F7F8'
            }
        },
    },

    data(){
        return {
            index: 0, // 默认操作第一个筛选
            date:{ // 时间筛选相关
                show: false,
                type: 'startDate',
                value: tools.formatTime(new Date()).ymd
            },
            selectData: [
                { 
                    label: '全部设备类型', value: '', show: false, type: 'deviceType', 
                    list: [
                        { label:'全部设备类型', value: '' },
                        { label:'升降机', value: 1 },
                        { label:'塔吊', value: 2 },
                        { label:'扬尘', value: 3 },
                        { label:'车辆监控', value: 4 },
                        { label:'电子围栏', value: 5 },
                        { label:'闸机', value: 6 },
                        { label:'视频监控', value: 'video' },
                    ]
                },
                { 
                    label:'安装时间', value:0, show: false, type:'date',
                    form:{
                        startDate: tools.formatTime(new Date()).ymd,
                        endDate: tools.formatTime(new Date()).ymd,
                    },
                },
            ]
        }
    },

    methods: {
        // 点击筛选
        click(index){
            this.index = index
            this.selectData.map((v,i)=>{
                v.show = false
            })
            this.selectData[index].show = true
        },

        
        // 显示时间选择器
        showDate(type){
            this.date.show = true
            this.date.type = type
        },
        // 选择时间
        selectDate(e){
            this.selectData[this.index].form[this.date.type] =  tools.formatTime(new Date(e.value)).ymd
            this.date.show = false
        },


        // 确定下拉选择
        select(index,tem){
            this.selectData[index].label = tem.label
            this.selectData[index].value = tem.value
            this.selectData[index].show = false
            this.$emit('select',{type:this.selectData[index].type,value:tem.value})
        },

        // 确定时间
        confirmDate(index){
            const form = this.selectData[index].form
            console.log('选择时间',form)
            this.selectData[index].label = form.startDate + ' - ' + form.endDate
            this.selectData[index].show = false
        },


        // 关闭下拉选择模态框
        close(){
            this.selectData.map((v,i)=>{
                v.show = false
            })
        },
    }
}
</script>

<style lang="scss">
    .uni-select{
        height: 74rpx;
        .item{
            height: 100%;
            &:first-child{
                border-radius: 12rpx 0 0 0;
            }
            &:last-child{
                border-radius: 0 12rpx 0 0;
            }
            position: relative;
            // 下拉选择
            .list{
                width: 100%;
                height: 300rpx;
                background: $uni-text-color-inverse;
                position: absolute;
                top: 74rpx;
                left: 0;
                z-index: 10001;
                box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.05);
                .tem{
                    height: 74rpx;
                }
            }
            // 时间选择
            .date{
                width: 100%;
                background: $uni-text-color-inverse;
                position: absolute;
                top: 74rpx;
                left: 0;
                z-index: 10001;
                box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.05);
                padding: 30rpx;
            }
        }
        .active-item{
            background: #21A5F3 !important;
        }
        .dateConfirm{
            width: 156rpx;
            height: 64rpx;
            border-radius: 100rpx;
            background: #3c9cff;
            font-size: 28rpx;
            color: $uni-text-color-inverse;
        }
    }
</style>